<template>
<div class="teacher_box">
  <div class="member_title">指导老师</div>
  <el-table
      :data="teacher"
      border
      style="margin: 30px 0">
    <el-table-column
        label="姓名"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.teachername"
        ></el-input>
        <el-tag v-if="!scope.row.edit" type="success">{{ scope.row.teachername }}</el-tag>
<!--        <span v-if="!scope.row.edit">{{ scope.row.teachername }}</span>-->
      </template>
    </el-table-column>
    <el-table-column
        label="学校"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.school"
        ></el-input>
        <span v-if="!scope.row.edit">{{ scope.row.school }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="专业"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.major"
        ></el-input>
        <el-tag v-if="!scope.row.edit">{{ scope.row.major }}</el-tag>
<!--        <span v-if="!scope.row.edit">{{ scope.row.major }}</span>-->
      </template>
    </el-table-column>
    <el-table-column
        label="邮箱"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.email"
        ></el-input>
        <span v-if="!scope.row.edit">{{ scope.row.email }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="联系方式"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.phone"
        ></el-input>
        <span v-if="!scope.row.edit">{{ scope.row.phone }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
            v-show="!scope.row.edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
        <el-button
            v-show="!scope.row.edit"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index,scope.row)"><i class="el-icon-delete"></i></el-button>
        <el-button
            v-show="scope.row.edit"
            size="mini"
            @click="handleCancel(scope.$index, scope.row)"
            style="margin-left: 0"><i class="el-icon-close"></i></el-button>
        <el-button
            v-show="scope.row.edit"
            size="mini"
            type="success"
            @click="handleSave(scope.$index, scope.row)"><i class="el-icon-check"></i></el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <div class="add_button">-->
    <el-button class="add el-icon-plus" type="success" size="max" @click="handleAddTeacher"> 添加</el-button>
<!--  </div>-->
</div>
</template>

<script>

export default {
  name: "teacher",
  props: ['teachers'],
  data() {
    return{
      teacher: [],
      oldObj: {}, // 中间容器，用来储存改变之前的值，方便回调
      newTeacher: {
        teachername: '',
        ID: '',
        school: '',
        major: '',
        email: '',
        phone: '',
        edit: false,
        Tnew: true
      }
    }
  },
  methods: {
    // 编辑
    handleEdit(index, row) {
      row.edit = true;
      // console.log(this.teacher);
      // const teacher = JSON.stringify(this.teacher[index])
      this.oldObj = {...this.teacher[index]};
      // this.oldObj = JSON.parse(teacher);
    },

    // 删除
    handleDelete(index,row) {
      // if(this.teacher.length !== 1) {
        this.$api.deleteTeacher(row.id) // 删除指导老师请求
          .then(res => {
            if(res.success){
              this.teacher.splice(index,1);
              window.sessionStorage.setItem('teacher',JSON.stringify(this.teacher));
              return this.$message.success("删除成功");
            } else {
              return  this.$message.warning("删除失败");
            }
          })

      // } else {
      //   this.$alert('至少需要有一位指导老师', '无法删除', {
      //     confirmButtonText: '确定',
      //     callback: () => {
      //       this.$message({
      //         type: 'warning',
      //         message: "至少需要有一位指导老师"
      //       });
      //     }
      //   });
      // }
    },

    // 取消
    handleCancel(index, row) {
      if(row.Tnew){
        this.teacher.splice(index,1);
      }
      row.edit = false;
    },

    // 保存
    handleSave(index,row) {
      if(row.teachername && row.school && row.email && row.phone && row.major){
        row.edit = false;
        let data = row;
        data.groupId = window.sessionStorage.getItem("groupID");
        if(!row.Tnew){
          this.$api.updateTeacherInfo(data)
              .then(res => {
                if(res.success){
                  window.sessionStorage.setItem('teacher',JSON.stringify(this.teacher));
                  this.$message({
                    type: 'success',
                    message: '修改成功！'
                  });
                } else {
                  this.$message({
                    type: 'warning',
                    message: '修改失败！'
                  });
                }
              });
        } else {
          this.$api.addTeacher(data)
              .then(res => {
                if(res.success){
                  row.Tnew = false;
                  window.sessionStorage.setItem('teacher',JSON.stringify(this.teacher));
                  this.$message({
                    type: 'success',
                    message: '添加成功！'
                  });
                } else {
                  this.$message({
                    type: 'warning',
                    message: '添加失败！'
                  });
                }
              })
        }
      } else {
        return this.$message.warning("请完善信息")
      }
    },

    // 添加
    handleAddTeacher() {
      // const groupID = window.sessionStorage.getItem('groupID');
      let newTeacher = JSON.stringify(this.newTeacher);
      const index = this.teacher.length
      for(let i in this.teacher){
        if(i === index) break;
        if(this.teacher[i].edit) {
          this.$message({
            type: 'warning',
            message: "请先保存"
          });
          return;
        }
      }
      this.teacher.push(JSON.parse(newTeacher))
      this.handleEdit(index,this.teacher[index]);
    }
  },
  watch: {
    teachers(value){
      value.forEach(temp => {
        temp.edit = false;
        temp.Tnew = false;
        let a = JSON.stringify(temp);
        this.teacher.push(JSON.parse(a));
      });
      // console.log('老师',this.teacher);
    }
  }
}
</script>

<style lang="less" scoped>
.member_title{
  border-left: 15px solid darkgreen;
  padding-left: 10px;
  margin-top: 80px;
  font-size: 25px;
  font-weight: bolder;
}
//.add_button {
//  width: 988px;
//  margin: 0 auto;
//  .add {
//    float: right;
//  }
//}
</style>
